<template>
	<view class="person-li" @click="skipper">
		<view class="left-li">
			<view class="top-name">
				<text>{{listcon.patients_name}}</text>
				<uni-tag :circle="true" text="本人" v-if="listcon.patients_identity_information==1"
					custom-style="padding:4rpx 12rpx;background-color: #6495ED; border-color: #eee; color: #fff; "
					size="mini" />
				<uni-tag :circle="true" text="父母" v-if="listcon.patients_identity_information==2"
					custom-style="padding:4rpx 12rpx;background-color: #6495ED; border-color: #eee; color: #fff; "
					size="mini" />
				<uni-tag :circle="true" text="配偶" v-if="listcon.patients_identity_information==3"
					custom-style="padding:4rpx 12rpx;background-color: #6495ED; border-color: #eee; color: #fff; "
					size="mini" />
				<uni-tag :circle="true" text="子女" v-if="listcon.patients_identity_information==4"
					custom-style="padding:4rpx 12rpx;background-color: #6495ED; border-color: #eee; color: #fff; "
					size="mini" />
			</view>
			<text>{{listcon.patients_id_number}}</text>
		</view>
		<view class="rig-tag">
			<text v-if="listcon.patients_default==0">默认就诊人</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['listcon'],
		setup(props, context) {
			const skipper = () => {
				context.emit('selectper', props.listcon)
			}

			return {
				skipper
			}
		}
	}
</script>

<style lang="scss">
	.person-li {
		width: 100%;
		height: 200rpx;
		display: flex;
		padding: 20rpx 32rpx;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		background-color: #eee;
		border-radius: 20rpx;
		margin-bottom: 24rpx;

		.left-li {
			height: 100rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			>text {
				font-size: 26rpx;
				color: #999;
			}
		}

		.top-name {
			display: flex;
			align-items: center;

			text {
				margin-right: 20rpx;
			}
		}

		.rig-tag {
			font-size: 24rpx;
			color: #6495ED;
		}
	}
</style>
